<template>
  <div>
    <nav>
      <span 
        v-for="item in navList"
        :key="item.index"
        :class="{active:item.index === navTab}"
        @click="toTab(item.index)"  
      >{{item.title}}</span>
    </nav>
    <section class="content">
      <div  @click="toDetail">
        <h2>
          <span>斗米：</span>
          <span>已打卡</span>
        </h2>
        <p>北京市海淀区东北旺路八维教育科技楼4楼</p>
        <p>
          <span>面试时间：2019-10-25 16:00</span>
          <span>未提醒</span>
        </p>
      </div>
    </section>
  </div>
</template>
<script>
  import {signGet} from '../../api/interview';
	export default {
		data() {
			return {
        navList:[
          {title:'未开始',index:0},
          {title:'已打卡',index:1},
          {title:'已放弃',index:2},
          {title:'全部',index:3}
        ],
        navTab:3
			}
    },
    async mounted(){
        let result =  await signGet();
        console.log(result,'result');
    },
		methods: {
			toDetail(){
				wx.redirectTo({url:'/pages/detail/index'})
      },
      toTab(index){
        this.navTab = index
      }
		}
	}
</script>
<style lang="scss" scoped>
nav {
  height: 100rpx;
  display: flex;
  span {
    flex: 1;
    text-align: center;
    line-height: 100rpx;
    font-size: 30rpx;
    &.active {
      color: blue;
      border-bottom: 1px solid blue;
    }
  }
}
.content {
  background: red;
  div {
    background: #fff;
    margin: 20rpx 0;
    padding: 0 40rpx;
    h2,p:nth-child(3) {
      height: 120rpx;
      line-height: 120rpx;
      font-weight: 900;
      text-align: right;
      span:nth-child(1){
          float: left;
      }
      span:nth-child(2){
        border: 1px solid #cae5ff;
        color: #70b7ff;
        background: #ecf6ff;
        font-size: 28rpx;
        padding: 10rpx 15rpx;
      }
    }
    p {
      font-size: 32rpx;
      color: gray;
      &:nth-child(3),&:nth-child(3) span:nth-child(2){
        font-size: 34rpx;
      }
    }
  }
}
</style>